<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆糖，美好生活研究所</title>
    <link rel="icon" href="../img/duitang.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <header>
        <img id="logo" src="../img/logo.png" alt="加载失败">
        <a href="../html/reg.html">注册</a>|
        <a class="select" href="javascript:;">登录</a>
    </header>
    <div class="box-wrap">
        <div class="box">
            <ul class="left">
                <li>
                    <p>手机号</p>
                    <input class="ipt" type="text">
                    <h4>手机号不能为空</h4>
                </li>
                <li>
                    <p>密码</p>
                    <input class="ipt" type="password">
                    <a id="forget" href="javascript:;">忘记密码?</a>
                    <h4>密码由6-18位字符组成, 区分大小写</h4>
                </li>
                <li>
                    <input type="checkbox">
                    <span>记住我</span>
                    <a href="javascript:;">切换至海外手机号登录</a>
                </li>
                <li id="login">登录</li>
                <li class="log">
                    <div>
                        <i></i>
                        <p>QQ登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微博登录</p>
                    </div>
                    <div>
                        <i></i>
                        <p>微信登录</p>
                    </div>
                </li>
            </ul>
            <div class="right">
                <img src="../img/down01.png" alt="">
                <p>扫一扫下载手机客户端浏览体验更佳</p>
            </div>
        </div>
    </div>
    <script>
        class Cookie {
            set(name, value, day) {
                let str = `${name}=${value};path=/`
                if (day) {
                    let date = new Date()
                    date.setDate(date.getDate() + day)
                    str += ';expires=' + date
                }
                document.cookie = str
            }
            get(name) {
                let str = document.cookie;
                let arr = str.split('; ')
                let res; // 保存 循环过程中结束

                arr.forEach(v => {
                    let vArr = v.split('=');
                    if (vArr[0] == name) {
                        res = vArr[1];
                    }
                })
                return res
            }
            remove(name) {
                this.set(name, '0', -100)
            }
        }
        let coco = new Cookie()
        let json = coco.get('duitang')
        let isPhone
        let isPass
        if (json) {
            let obj = JSON.parse(json) // 保存了密码
            let username = obj.username.slice(3)
            $('input').eq(0).val(username)
            $('input').eq(1).val(obj.password)
            $('input').eq(2).prop('checked', 'true')
            isPhone = true
            isPass = true
        }
        // 手机号
        $('input').eq(0).change(function () {
            let str = $(this).val()
            let reg = /^1[3-9]\d{9}$/
            if (reg.test(str)) {
                isPhone = true
                $('h4').eq(0).css('visibility', 'hidden')
            } else if (str == '') {
                isPhone = false
                $('h4').eq(0).css('visibility', 'visible').text('手机号不能为空')
            } else {
                isPhone = false
                $('h4').eq(0).css('visibility', 'visible').text('您的手机号码非法')
            }
        })
        // 密码
        $('input').eq(1).change(function () {
            let str = $(this).val()
            let reg = /^.{6,18}$/
            if (reg.test(str)) {
                isPass = true
                $('h4').eq(1).css('visibility', 'hidden')
            } else if (str == '') {
                isPass = false
                $('h4').eq(1).css('visibility', 'visible').text('密码不能为空')
            } else {
                isPass = false
                $('h4').eq(1).css('visibility', 'visible').text('密码由6-18位字符组成, 区分大小写')
            }
        })

        // 忘记密码
        $('#forget').click(() => alert('对不起，我也没办法'))

        // 切换到海外登录
        $('a').eq(3).click(() => alert('暂未提供该功能。。'))

        // 登录
        $('#login').click(function () {
            if (isPhone && isPass) {
                let loginUrl = 'http://jx.xuzhixiang.top/ap/api/login.php'
                axios.get(loginUrl, {
                    params: {
                        username: 'dt_' + $('input').eq(0).val(),
                        password: $('input').eq(1).val()
                    }
                }).then(function (res) {
                    if (res.data.code == 1) {
                        let obj = JSON.stringify(res.data.data)
                        if ($('input').eq(2).prop('checked')) {
                            coco.set('duitang', obj, 3) // 3天有效期
                        } else {
                            coco.set('duitang', obj, -1)
                        }
                        localStorage.setItem('duitang', obj)
                        location.href = 'index.html'
                    } else {
                        alert(res.data.msg)
                    }
                })
            } else {
                alert('请检查您的手机号和密码')
            }
        })

        // logo回到主页面
        $('#logo').click(() => location.href = 'index.html')

        // 监听加载失败的图片
        document.addEventListener("error", function (e) {

            var elem = e.target;
            if (elem.tagName.toLowerCase() == 'img') {
                elem.src = "../img/tx.jpeg";
            }
        }, true);
    </script>
</body>

</html>